<template>
	<div class="ctfQuestion-warp">
	    <Row style="margin-bottom:10px">
        	<Col span="3">
        		<!--<Button type="primary" class="md-add-jh" @click="addKey"></Button>-->
        	</Col>
        	<!--<Col span="16">
				<Input v-model.trim="formValidate.key" type="textarea" v-if="keyModal.show" :autosize="{minRows: 2,maxRows: 5}" placeholder="key"></Input>
        	</Col>
        	<Col span="3">
        		<Button type="primary" @click="saveCtfKeys">save</Button>
        	</Col>-->
        	<!--<Col span="18" style="text-align: right;">
        		 <Page :total="totalCount" :current="queryCtfInfo.page" show-elevator  show-sizer show-total @on-change="changePage" @on-page-size-change="changeSize"/>
        	</Col>-->

    	</Row>
    	<Form :label-width="60" :model="formValidate" ref="formValidate">
    		<Row v-for="(item, index) in formValidate.keyList" :key="index">
    			 <Col span="11">
	    			<FormItem
		                :key="index"
		                label="Url/File"
		                :prop="'keyList.' + index + '.resourceId'"
		                :rules="{required: item.edit, message: 'Url/File' + (index+1) +'不能为空', trigger: 'change'}">
			            <Select filterable v-model="item.resourceId" placeholder="请选择">
							<Option :value="url.urlId"  v-for="url in urlList" :key="url.urlId" v-if="urlList.length > 0" :title="url.url">{{url.url}}</Option>
							<!--
              <Option :value="file.fileId"  v-for="file in fileList" :key="file.fileId" v-if="fileList.length > 0">{{file.fileName}}</Option>
						-->
            </Select>
			            <!--<span v-if="!item.edit">{{item.}}</span>-->
		        	</FormItem>
		        </Col>
    			<Col span="11">
	    			<FormItem
		                label="Flag"
		                :prop="'keyList.' + index + '.flag'"
		                :rules="{required: item.edit, message: '标志不能为空', trigger: 'change'}">
	                    <Input type="text" v-model.trim="item.flag" placeholder="输入一些东西..."></Input>
	                    <!--<span v-if="!item.edit">{{item.flag}}</span>-->
		        	</FormItem>
		       </Col>
		       <Col span="16">
		       		<FormItem label="类型">
				       	<RadioGroup v-model="item.type">
			            	<Radio label="0">完全匹配</Radio>
                   			<Radio label="1">忽略大小写</Radio>
                   			<Radio label="2">静态flag验证</Radio>
			            </RadioGroup>
		            </FormItem>
	           </Col>
		        <Col span='5' :offset="1" style="margin-top:5px;text-align:center;">
		        	<Button @click="saveCtfKeys(item)" size="small" type="primary">保存</Button>
                	<!--<Button @click="item.edit = true" v-if="!item.edit" size="small" type="primary">修改</Button>-->
                    <Button @click="removeKey(index)" v-if="!item.keyId" size="small" type="error">删除</Button>
                    <Button @click="delCtfKeys(item.keyId)" v-if="item.keyId" size="small" type="error">删除</Button>
		        </Col>
		        <Divider />
    		</Row>
	        <FormItem>
	            <Row>
	                <Col span="12">
	                    <Button type="primary" ghost long @click="addKey" class="md-add-jh">添加</Button>
	                </Col>
	            </Row>
	        </FormItem>
	    </Form>
	    <!--<Table :columns="keyCol" :data="keyList"></Table>-->
	    <Modal
	        v-model="keyModal.show"
	        :title="keyModal.title"
	        @on-ok="saveCtfKeys"
	        @on-cancel="cancel('formValidate')"
	        :loading="keyModal.loading"
	        :mask-closable = "false">
	        <Form :label-width="80" :model="formValidate" :rules="ruleValidate" ref="formValidate">
				<FormItem label="类型" prop="type">
		            <RadioGroup v-model="formValidate.type">
		            	<Radio label="0">固定值</Radio>
		                <Radio label="1">模糊匹配</Radio>
		            </RadioGroup>
		        </FormItem>
		        <FormItem label="resourceId" prop="resourceId">
					<Select filterable v-model="formValidate.resourceId" placeholder="请选择">
						<Option :value="url.urlId"  v-for="url in urlList" :key="url.urlId" v-if="urlList.length > 0" :title="url.url">{{url.url}}</Option>
						<!--
            			<Option :value="file.fileId"  v-for="file in fileList" :key="file.fileId" v-if="fileList.length > 0">{{file.fileName}}</Option>
					 	 -->
          			</Select>
				</FormItem>
				<FormItem label="Flag" prop="flag">
					<Input v-model.trim="formValidate.flag" type="textarea" :maxlength="200" :autosize="{minRows: 2,maxRows: 5}" placeholder="key"></Input>
				</FormItem>
		    </Form>
	    </Modal>
	</div>
</template>
<script>
	import {createCtfKeys,modifyCtfKeys,delCtfKeys,queryCtfKeys,queryCtfUrls,queryCtfFiles} from '@/api/question'
	export default {
		 props:['chaId','show'],
		data(){
			return{
				// queryCtfKeysInfo:{
				// 	page:1,
				// 	rows:10
				// },
				index:0,
				keyList:[],
				urlList:[],
				fileList:[],
				totalCount:0,
				keyModal:{
					show:false,
					loading:true,
					title:'添加Key'
				},
				formValidate:{
					chaId: this.chaId,
					flag: "",
					resourceId:"",
					source:'1',
					type:'0',
					keyList:[],
					urlList:[],
				},
				ruleValidate:{
					type:[
					   { required: true, message: 'type不能为空', trigger: 'change' }
					],
//					source:[
//					   { required: true, message: 'key不能为空', trigger: 'change' }
//					],
					resourceId:[
					   { required: true, message: 'key不能为空', trigger: 'change' }
					],
					flag:[
					   { required: true, message: 'key不能为空', trigger: 'change' }
					]
				},
				keyCol:[
					{
						type: 'index',
						width: 60,
						align: 'center',
						ellipsis: true
					},
					{
						title: 'type',
						key: 'type',
						align: 'center',
						ellipsis: true,
						tooltip:true,
						render:(h,params) => {
							return h('span',params.row.type == '0' ? '固定值' : '模糊匹配')
						}
					},
					{
						title: 'flag',
						key: 'flag',
						align: 'center',
						ellipsis: true,
						tooltip:true
					},
//					{
//						title: 'createTime',
//						key: 'createTime',
//						align: 'center',
//						ellipsis: true,
//						tooltip:true
//					},
					{
					    title:'操作',
					    width:140,
					    render:(h,params) => {
					    	return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.keyModal.show = true;
											this.keyModal.title = '修改key';
											this.getCtfKeysInfo(params.row);
										}
									}
								}, '修改'),
								h('Poptip', {
									props: {
										confirm: true,
										'ok-text': "确定",
										'cancel-text': "取消",
										type: 'error',
										size: 'large',
										title: '你确定要删除吗?',
										transfer:true
									},
									style: {
										marginLeft: '0px'
									},
									on: {
										'on-ok': () => {
											this.delCtfKeys(params.row.keyId)
										}
									}
								}, [
									h('Button', {
										props: {
											type: 'error',
											size: 'small'
										},
										style: {
											marginRight: '5px'
										},
									}, '删除')
								])
							])
					    }
					},
				]
      		}
		},
		computed:{

		},
		filters:{

		},
		watch:{
			'chaId':function(id){
				this.formValidate.chaId = id;
			},
			'show':function(id){
				this.queryCtfKeys();
				this.queryCtfUrls();
				//this.queryCtfFiles();
			}
		},
		methods:{
			addKey(){
				this.index ++ ;
				this.keyList.push({flag:'',resourceId:'',type:'0',index:this.index,chaId:this.chaId,edit:true})
			},
			removeKey(index){
				this.keyList.splice(this.keyList.findIndex(key => key.index === index), 1)
			},
			queryCtfUrls(){
				queryCtfUrls(this.chaId).then(data => {
					if(data.code == 1){
						this.urlList = data.data.items || data.data;
						this.totalCount = data.data.totalCount;
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			queryCtfFiles(){
				queryCtfFiles(this.chaId).then(data => {
					if(data.code == 1){
						this.fileList = data.data.items || data.data;
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			queryCtfKeys(){
				queryCtfKeys(this.chaId).then(data => {
					if(data.code == 1){
						this.keyList = data.data.items || data.data;
						this.keyList.forEach(key => {
							this.$set(key,'edit',false);
						})
						this.formValidate.keyList = this.keyList;
						if(data.data.items){
							this.index = data.data.items.length;
						}
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			delCtfKeys(id){
				delCtfKeys(id).then(data => {
					if(data.code == 1){
						this.$Message.info('操作成功');
						this.queryCtfKeys();
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			modifyCtfKeys(){
				modifyCtfKeys(this.key).then(data => {
//					this.cancelLoading('keyModal');
					if(data.code == 1){
						this.$Message.info('操作成功');
//						this.keyModal.show = false;
						this.queryCtfKeys();
					}else{
						this.$Message.warning(data.message);
					}
				})
			},

			createCtfKeys(){
				createCtfKeys(this.key).then(data => {
//					this.cancelLoading('keyModal');
					if(data.code == 1){
						this.$Message.info('操作成功');
//						this.keyModal.show = false;
						this.queryCtfKeys();
					}else{
						this.$Message.warning(data.message);
					}
				})
			},
			saveCtfKeys(key){
				this.key = key;
				if(!this.key.flag){
					this.$Message.warning('Flag不能为空');
					return
				}
				if(!this.key.resourceId){
					this.$Message.warning('Url/File不能为空');
					return
				}
//				this.$refs['formValidate'].validate((valid) => {
//          		if (valid) {
            			if(!this.key.keyId){
            				this.createCtfKeys();
            			}else{
            				this.modifyCtfKeys()
            			}
//          		}else{
//          			this.cancelLoading('keyModal');
//          		}
//          	})
			},
			getCtfKeysInfo(data){
				this.formValidate = JSON.parse(JSON.stringify(data));
				this.formValidate.source = '1';
			},
			changePage(page){
				this.queryCtfInfo.page = page;
				this.queryCtfList();
			},
			changeSize(size){
				this.queryCtfInfo.rows = size;
				this.queryCtfList();
			},
			cancelLoading(name){
		    	this[name].loading = false;
		      	setTimeout(() => {
		      		this[name].loading = true;
		      	})
		   },
		   cancel(name){
		  		this.$refs[name].resetFields();
		  	},
		},
		mounted(){

		},
		created(){

		}
	}
</script>
